<template>
  <div class="loader" v-once>
    <div class="loader__content">

      <svg xmlns="http://www.w3.org/2000/svg" width="300" height="69" viewBox="0 0 114 26">

        <defs>
          <polygon id="a" points=".079 .082 12.554 .082 12.554 18.317 .079 18.317 .079 .082"/>
          <polygon id="c" points=".022 .082 12.498 .082 12.498 18.317 .022 18.317 .022 .082"/>
          <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" > 
            <stop offset="0%" stop-color="#ff512f">
                <animate attributeName="stop-color" values="#ff512f; #F09819; #ff512f" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="100%" stop-color="#F09819">
                <animate attributeName="stop-color" values="#F09819; #ff512f; #F09819" dur="1s" repeatCount="indefinite"></animate>
            </stop>
          </linearGradient> 
        </defs>

        <g fill="url('#logo-gradient')" fill-rule="evenodd">
          <path fill="url('#logo-gradient')" d="M18.1413825,8.710725 C17.6395834,9.232725 11.7250245,15.209475 10.2910638,16.577475 C8.73190218,18.053725 7.76414672,18.485725 7.01119913,18.485725 C5.8283869,18.485725 5.29074498,17.621725 6.31226463,15.749475 C6.43771441,15.497225 6.68861397,15.047225 7.01119913,14.453225 C5.09360961,16.577475 2.87110742,18.485725 1.70621659,18.485725 C-0.0861720524,18.485725 -0.462521397,16.559475 0.558998253,14.669225 C1.29377555,13.319225 4.89647424,6.550475 4.89647424,6.550475 L7.74597642,6.532725 C7.74597642,6.532725 5.18296769,11.320975 4.4123476,12.778975 C4.14352664,13.265225 3.60588472,14.399225 4.64532576,14.399225 C5.64917293,14.399225 8.67813799,11.194975 9.75342183,9.322725 C10.578055,7.756725 11.2232253,6.550475 11.2232253,6.550475 L14.0729764,6.532725 C14.0729764,6.532725 11.5099677,11.320975 10.7393476,12.778975 C10.4705266,13.265225 9.9864,14.255225 10.1297712,14.399225 C10.2733913,14.561225 10.7035048,14.165225 11.1694611,13.769225 C11.8504742,13.193225 17.2811555,8.008725 17.9442472,7.306725 C18.2847537,6.946725 18.3205965,8.512725 18.1413825,8.710725"/>
          <g transform="translate(11.948 .168)">
            <mask id="b" fill="white">
              <use xlink:href="#a"/>
            </mask>
            <path fill="url('#logo-gradient')" d="M6.8201869,2.07995 C7.32198603,0.98195 8.59440524,0.0817 9.68785939,0.0817 C10.7987371,0.0817 11.2828638,0.98195 10.7987371,2.07995 C10.3151083,3.1782 9.02426987,4.0602 7.93131354,4.0602 C6.83785939,4.0602 6.33606026,3.1782 6.8201869,2.07995 M12.4477546,8.54245 C11.9462044,9.06445 6.03139651,15.0412 4.59768472,16.4092 C3.03827424,17.88545 2.07051878,18.31745 1.31782009,18.31745 C0.134758952,18.31745 -0.402882969,17.45345 0.618636681,15.5812 C1.35366288,14.23095 5.52959738,6.3822 5.52959738,6.3822 L8.37934847,6.36445 C8.37934847,6.36445 5.81633974,11.1527 5.04571965,12.61095 C4.77689869,13.09695 4.29302096,14.08695 4.43614323,14.23095 C4.57976332,14.39295 5.00987686,13.99695 5.47583319,13.60095 C6.15684629,13.02495 11.5872786,7.84045 12.2506192,7.13845 C12.5913747,6.77845 12.6272175,8.34445 12.4477546,8.54245" mask="url(#b)"/>
          </g>
          <path fill="url('#logo-gradient')" d="M41.6187367,8.710725 C41.1169376,9.232725 35.2203,15.209475 33.7863393,16.577475 C32.2274266,18.053725 31.2594223,18.485725 30.5064747,18.485725 C29.5207978,18.485725 28.9831559,17.891725 29.4135183,16.631475 C27.9793087,17.729475 26.3482127,18.485725 24.5919157,18.485725 C20.4876668,18.485725 17.4407803,14.003225 22.2262913,7.252725 C25.9006755,2.068225 30.2734965,0.736225 32.3167847,0.736225 C36.3316755,0.736225 36.0626057,5.632475 33.1053262,7.612725 C32.245348,8.188725 31.0622869,7.000725 31.0622869,7.000725 C33.7684179,4.912475 34.1450162,2.338225 32.3526275,2.338225 C30.9545096,2.338225 27.7104878,4.228475 25.2373349,8.260725 C22.7639332,12.293225 22.7099201,15.605475 25.7391341,15.605475 C28.2660511,15.605475 30.3812738,13.553225 31.8508284,11.734975 L29.6644179,11.734975 C29.5207978,11.734975 29.3955969,11.644975 29.3236624,11.518975 C29.2519769,11.392975 29.2519769,11.230975 29.3236624,11.104975 L30.0046755,9.970975 C30.1301253,9.736725 30.3812738,9.610975 30.6500948,9.610975 L34.5213655,9.610975 L35.9194834,9.592725 C35.9194834,9.592725 35.0052432,11.320975 34.2167017,12.778975 C33.9658022,13.265225 33.4819245,14.255225 33.6252956,14.399225 C33.7684179,14.561225 34.1985314,14.165225 34.6468153,13.769225 C35.3459987,13.193225 40.776431,8.008725 41.4395227,7.306725 C41.7800293,6.946725 41.816121,8.512725 41.6187367,8.710725"/>
          <path fill="url('#logo-gradient')" d="M50.0947362,8.710725 C49.5926882,9.232725 43.6960507,15.209475 42.2444175,16.577475 C40.7031773,18.053725 39.6993301,18.485725 38.9643039,18.485725 C37.7814917,18.485725 37.2617712,17.621725 38.2656183,15.749475 C39.0003956,14.399225 39.9863214,12.436975 40.864221,10.960975 C41.7784611,9.430725 40.685007,9.304725 40.2551424,9.088725 C39.287138,8.584725 37.8890201,7.000725 39.1977799,5.344475 C40.2369721,4.048475 41.7963825,4.300475 42.674531,4.876475 C43.624614,5.488475 42.764138,6.694725 41.6888541,7.864725 C41.7963825,7.990725 41.9218323,8.098725 42.082876,8.188725 C43.4630725,8.980725 45.2375397,8.062725 44.0368061,10.366975 C43.5885223,11.230975 43.4630725,11.320975 42.6927013,12.778975 C42.4238803,13.265225 41.9576751,14.255225 42.1010463,14.399225 C42.2444175,14.561225 42.674531,14.165225 43.1225659,13.769225 C43.8217493,13.193225 49.2342603,8.008725 49.897352,7.306725 C50.2560288,6.946725 50.2739502,8.512725 50.0947362,8.710725"/>
          <path fill="url('#logo-gradient')" d="M51.9578895,12.113075 C53.1230293,10.168825 53.3019943,8.584825 52.3880031,8.584825 C51.4558415,8.584825 49.7712301,10.168825 48.6060904,12.113075 C47.4593699,14.057325 47.279907,15.641325 48.1938983,15.641325 C49.1260598,15.641325 50.8109201,14.057325 51.9578895,12.113075 M61.9590249,8.710825 C61.4569769,9.232825 55.5424179,15.209325 54.1087061,16.577325 C52.567217,18.053575 51.5812913,18.485575 50.8288415,18.485575 C49.8249943,18.485575 49.2873524,17.873575 49.7712301,16.541325 C48.7138677,17.603575 47.4411996,18.485575 46.2046231,18.485575 C43.7670642,18.485575 43.0322869,15.605325 45.5773742,11.717075 C48.1224616,7.828575 50.4166493,6.532575 51.9937323,6.532575 C53.015252,6.532575 53.7679507,7.486825 53.9832563,8.548825 C54.6102563,7.378825 55.0406188,6.550575 55.0406188,6.550575 L57.8903699,6.532575 C57.8903699,6.532575 55.3273611,11.321075 54.5564921,12.779075 C54.2876712,13.265075 53.8037934,14.255325 53.9471646,14.399325 C54.1087061,14.561325 54.5208983,14.165325 54.9868546,13.769325 C55.686038,13.193075 61.0985489,8.008825 61.7618895,7.306575 C62.1200686,6.946575 62.13799,8.512825 61.9590249,8.710825"/>
          <path fill="url('#logo-gradient')" d="M63.8216306,12.113075 C64.9867703,10.168825 65.1657354,8.584825 64.2517441,8.584825 C63.3195825,8.584825 61.6349712,10.168825 60.4698314,12.113075 C59.322862,14.057325 59.143648,15.641325 60.0578882,15.641325 C60.9898009,15.641325 62.6746611,14.057325 63.8216306,12.113075 M73.8227659,8.710825 C73.3207179,9.232825 67.406159,15.209325 65.9724472,16.577325 C64.4309581,18.053575 63.4450323,18.485575 62.6925825,18.485575 C61.6887354,18.485575 61.1510934,17.873575 61.6349712,16.541325 C60.5776087,17.603575 59.3051895,18.485575 58.0683642,18.485575 C55.6308052,18.485575 54.8960279,15.605325 57.4408664,11.717075 C59.9862026,7.828575 62.2803904,6.532575 63.8574734,6.532575 C64.878993,6.532575 65.6316917,7.468575 65.8469974,8.530825 C67.8902856,4.678325 69.9870891,0.736075 69.9870891,0.736075 L72.8186699,0.736075 C72.8186699,0.736075 67.1911022,11.321075 66.4202332,12.779075 C66.1514122,13.265075 65.6675345,14.255325 65.8109057,14.399325 C65.9724472,14.561325 66.3846393,14.165325 66.8505956,13.769325 C67.549779,13.193075 72.96229,8.008825 73.6253817,7.306575 C73.9838096,6.946575 74.001731,8.512825 73.8227659,8.710825"/>
          <g transform="translate(67.703 .168)">
            <mask id="d" fill="white">
              <use xlink:href="#c"/>
            </mask>
            <path fill="url('#logo-gradient')" d="M6.76353537,2.07995 C7.2653345,0.98195 8.53800262,0.0817 9.63120786,0.0817 C10.7423345,0.0817 11.2264611,0.98195 10.7423345,2.07995 C10.2584568,3.1782 8.96786725,4.0602 7.87466201,4.0602 C6.78145677,4.0602 6.27965764,3.1782 6.76353537,2.07995 M12.3911031,8.54245 C11.8895528,9.06445 5.97499389,15.0412 4.54103319,16.4092 C2.98187162,17.88545 2.01386725,18.31745 1.26116856,18.31745 C0.0783563319,18.31745 -0.459534498,17.45345 0.562234061,15.5812 C1.29701135,14.23095 5.47294585,6.3822 5.47294585,6.3822 L8.32294585,6.36445 C8.32294585,6.36445 5.75993712,11.1527 4.98906812,12.61095 C4.72024716,13.09695 4.23636943,14.08695 4.37974061,14.23095 C4.52311179,14.39295 4.95347424,13.99695 5.41943057,13.60095 C6.10044367,13.02495 11.530876,7.84045 12.1939677,7.13845 C12.5347231,6.77845 12.5705659,8.34445 12.3911031,8.54245" mask="url(#d)"/>
          </g>
          <path fill="url('#logo-gradient')" d="M78.7673044,12.113075 C78.7312127,12.203075 78.6776974,12.275075 78.6239332,12.365075 C79.5020817,13.049075 80.5056799,12.365075 81.3479856,11.663075 C82.4952039,10.691075 83.4629594,8.584825 82.5489681,8.584825 C81.6168066,8.584825 79.9321952,10.150825 78.7673044,12.113075 M90.5244878,8.638825 C87.8897934,12.941325 83.3733524,18.485575 78.9465183,18.485575 C74.5552782,18.485575 73.6592083,15.083325 76.1146886,11.141075 C78.1218852,7.936575 80.5773655,6.532575 82.1544485,6.532575 C84.7535489,6.532575 86.3664747,9.016825 83.8034659,12.239075 C82.2622258,14.165325 80.4877585,15.011325 78.928348,14.525325 C78.5340773,14.417325 78.2296624,14.219325 77.978514,13.985325 C77.6738502,15.425325 78.301348,16.343325 79.8425882,16.343325 C82.9253175,16.343325 86.7789157,12.149075 90.2200729,7.306575 C90.5068153,6.910575 90.6681079,8.404825 90.5244878,8.638825"/>
          <path fill="url('#logo-gradient')" d="M103.213086,8.710725 C102.711287,9.232725 96.8146493,15.209475 95.3806886,16.577475 C93.8215271,18.053725 92.8358502,18.485725 92.100824,18.485725 C90.9180118,18.485725 90.380121,17.621725 91.4018895,15.749475 C92.1366668,14.399225 92.6566362,13.355225 93.4807716,11.842975 C94.2160467,10.456975 94.448776,9.664725 93.8394485,9.664725 C92.8000074,9.664725 88.0142476,14.165225 85.6844659,18.485725 L85.7203087,18.431725 L85.6844659,18.485725 L82.8526362,18.485725 L89.2331515,6.550475 L92.0649812,6.550475 L89.1437934,12.023225 C92.7459943,7.306725 95.3450948,6.532725 96.1871515,6.532725 C97.5855183,6.532725 98.6784747,7.324725 97.3166974,9.934725 C96.8863349,10.780975 96.5995926,11.320975 95.8110511,12.778975 C95.5601515,13.265225 95.0762738,14.255225 95.219645,14.399225 C95.3630162,14.561225 95.7928808,14.165225 96.2411646,13.769225 C96.9400991,13.193225 102.37078,8.008725 103.033872,7.306725 C103.374379,6.946725 103.410221,8.512725 103.213086,8.710725"/>
          <path fill="url('#logo-gradient')" d="M110.363101,8.710725 C109.861302,9.232725 103.068595,15.209475 101.634883,16.577475 C100.075472,18.053725 99.1074681,18.485725 98.3547694,18.485725 C97.1719572,18.485725 96.6343153,17.621725 97.6558349,15.749475 C98.0142629,15.083225 99.9321013,11.464975 101.813848,7.954725 L99.7349659,7.954725 C100.039381,7.378725 100.218844,7.054475 100.218844,7.054475 L102.279804,7.054475 C104.054272,3.724475 104.610084,2.752225 104.610084,2.752225 L107.459586,2.752225 C107.459586,2.752225 106.778822,3.922475 105.129804,7.054475 L107.262451,7.036725 C107.262451,7.036725 107.083237,7.378725 106.778822,7.954725 L104.645678,7.954725 C103.462866,10.186975 102.387582,12.202975 102.082669,12.778975 C101.813848,13.265225 101.32997,14.255225 101.473341,14.399225 C101.616713,14.561225 102.047075,14.165225 102.513031,13.769225 C103.194045,13.193225 109.502874,8.008725 110.165966,7.306725 C110.506472,6.946725 110.542564,8.512725 110.363101,8.710725"/>
          <path fill="url('#logo-gradient')" d="M107.387154,15.947425 C106.347713,16.271425 105.558922,16.559425 105.487237,16.937425 C105.361787,17.603675 106.258106,17.459425 106.706141,16.847425 C106.921197,16.559425 107.154176,16.307425 107.387154,15.947425 M113.714154,14.903425 C113.714154,17.477675 111.670866,21.419925 105.254507,21.419925 C104.644931,21.419925 17.839407,21.849925 12.2656035,25.918175 C10.1864725,24.460175 3.39351616,20.697675 3.39351616,20.697675 C3.39351616,20.697675 102.852791,19.907675 105.379957,19.907675 C110.380276,19.907675 112.853678,16.973425 112.853678,15.623425 C112.853678,14.597425 111.921765,14.669425 110.667267,14.993425 C109.448363,17.927425 107.673896,18.485675 105.899429,18.485675 C104.788551,18.485675 103.211219,18.125675 103.497962,16.559425 C103.713018,15.317425 105.827743,14.903425 108.121931,14.291175 C108.301394,13.751175 108.444765,13.103175 108.605809,12.257175 C109.107857,9.430925 109.287071,5.920675 112.423564,5.704425 C115.560058,5.488675 112.262272,8.314675 112.262272,8.314675 L111.545416,11.915175 C111.47373,12.365175 111.365953,12.797175 111.258673,13.193175 L111.133224,13.625175 C112.477328,13.355175 113.714154,13.589175 113.714154,14.903425"/>
        </g>
      </svg>

      <p class="loader__tip">
        {{ messages | randomize }}
      </p>

      <div class="spinner loader__spinner"></div>

    </div>
  </div>
</template>


<script>
export default {
  name: 'preload',
  data() {
    return {
      messages: [
        'Use the left and right arrow keys to quickly navigate between gradients',
        'Use the top and bottom arrow keys to change gradient direction',
        'Click the colored square next to hex value to copy to clipboard',
        'Hit the shift key to see all gradients',
        'Press the enter key to get the css code for the gradient',
      ],
    };
  },
  filters: {
    randomize(messages) {
      if (!messages) return '';
      const randomMessage = Math.floor(Math.random() * messages.length);
      return messages[randomMessage];
    },
  },
};
</script>
